<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui.dtree帮助手册</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script type="text/javascript" src="../layui/layui.js"></script>

<link rel="stylesheet" href="../layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../layui_ext/dtree/font/dtreefont.css">
</head>

<body>
	<div class="container">
		<div class="layui-row layui-col-space10">
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title">
					<legend>在线示例</legend>
					<div class="layui-field-box">
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-xs12">
								<div id="toolbarDiv" style="overflow: auto"><ul id="demoTree" class="dtree" data-id="0"></ul></div>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	layui.extend({
		dtree: '{/}../layui_ext/dtree/dtree'
	}).use(['element','layer', 'table', 'code' ,'util', 'dtree', 'form'], function(){
		var element = layui.element,
			layer = layui.layer,
			table = layui.table,
			util = layui.util,
			dtree = layui.dtree,
			form = layui.form,
			$ = layui.$;
		
		var data = [{
			"id":"001",
			"title": "湖南省",
			"last": false,
			"parentId": "0",
			"children":[{
				"id":"001001",
				"title": "长沙市",
				"last":true,
				"parentId": "001"
			},{
				"id":"001002",
				"title": "株洲市",
				"last":true,
				"parentId": "001"
			},{
				"id":"001003",
				"title": "湘潭市",
				"last":true,
				"parentId": "001"
			},{
				"id":"001004",
				"title": "衡阳市",
				"last":true,
				"parentId": "001"
			},{
				"id":"001005",
				"title": "郴州市",
				"last":true,
				"parentId": "001"
			}]
		},{
			"id":"002",
			"title": "湖北省",
			"last": false,
			"parentId": "0",
			"children":[{
				"id":"002001",
				"title": "武汉市",
				"last":true
			},{
				"id":"002002",
				"title": "黄冈市",
				"last":true,
				"parentId": "002"
			},{
				"id":"002003",
				"title": "潜江市",
				"last":true,
				"parentId": "002"
			},{
				"id":"002004",
				"title": "荆州市",
				"last":true,
				"parentId": "002"
			},{
				"id":"002005",
				"title": "襄阳市",
				"last":true,
				"parentId": "002"			
			}]
		},{
			"id":"003",
			"title": "广东省",
			"last": false,
			"parentId": "0",
			"level": "1",
			"children":[{
				"id":"003001",
				"title": "广州市",
				"last":false,
				"parentId": "003",
				"children":[{
					"id":"003001001",
					"title": "天河区",
					"last":true,
					"parentId": "003001"
				},{
					"id":"003001002",
					"title": "花都区",
					"last":true,
					"parentId": "003001"
				}]
			},{
				"id":"003002",
				"title": "深圳市",
				"last":true,
				"parentId": "003"
			},{
				"id":"003003",
				"title": "中山市",
				"last":true,
				"parentId": "003"
			},{
				"id":"003004",
				"title": "东莞市",
				"last":true,
				"parentId": "003"
			},{
				"id":"003005",
				"title": "珠海市",
				"last":true,
				"parentId": "003"
			},{
				"id":"003006",
				"title": "韶关市",
				"last":true,
				"parentId": "003"
			}]
		},{
			"id":"004",
			"title": "浙江省",
			"last": false,
			"parentId": "0",
			"children":[{
				"id":"004001",
				"title": "杭州市",
				"last":true,
				"parentId": "004"
			},{
				"id":"004002",
				"title": "温州市",
				"last":true,
				"parentId": "004"
			},{
				"id":"004003",
				"title": "绍兴市",
				"last":true,
				"parentId": "004"
			},{
				"id":"004004",
				"title": "金华市",
				"last":true,
				"parentId": "004"
			},{
				"id":"004005",
				"title": "义乌市",
				"last":true,
				"parentId": "004"
			}]
		},{
			"id":"005",
			"title": "福建省",
			"last": false,
			"parentId": "0",
			"children":[{
				"id":"005001",
				"title": "厦门市",
				"last":true,
				"parentId": "005"
			}]
		}];
		
		var DTree = dtree.render({
			elem: "#demoTree",
			data: data
		});
		
		dtree.on("node(demoTree)", function(obj){
			layer.msg(JSON.stringify(obj.param));
		})
	});
</script>
</html>